<!--商品评价列表-->
<template>
    <div class="page_evaluationList">
        <div class="pagesMain" style="height: 91vh;">
            <dashboard :isShowTab="false"></dashboard>
            <div v-if="comments.length" class="evaluate">

                <div v-for="item in comments" class="itemComment">
                    <div>
                        <img class="iconAvatar vMiddle" :src="item.user_info.img" alt=""/>
                        <span class="vMiddle userName">{{item.user_info.nickname}}</span>
                    </div>
                    <div class="comment">
                        {{item.comment_content}}
                    </div>
                    <div v-if="item.comment_picture" style="margin:0 .42rem;">
                        <div class="translateBlock itemPicture" v-for="item in item.comment_imgs" :key="item">
                            <img :src="item" alt="" class="commentPic"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <tabcard/>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {goodsDetails} from '../../services/goods'
    import dashboard from '@/components/dashboard'
    import tabcard from '@/components/tabCard'

    export default {
        name: "evaluationList",
        components: {
            dashboard,
            tabcard,
        },
        data() {
            return {
                goods_id: this.$route.query.goods_id,
                longitude: '106.57',     // 经度
                dimensionality: '29.55',  // 纬度
                detailsInfo: null,
                comments: [],
            }
        },

        mounted() {
            this.getDetails();
        },
        watch: {},
        methods: {
            // 获取商品详情
            getDetails() {
                let param = {
                    goods_id: this.goods_id,
                    longitude: this.longitude,
                    dimensionality: this.dimensionality,
                }
                this.$post(goodsDetails, param).then(res => {
                    this.detailsInfo = res.data;
                    if (res.data.comment.length) {
                        this.comments = res.data.comment;
                        this.comments.forEach(item => {
                            Vue.set(item, 'comment_imgs', item.comment_img.split(','))
                        })

                    }
                })
            },
        }
    };
</script>

<style lang="less" rel="stylesheet/less" type="text/less">
    .page_evaluationList {

        .evaluate {
            overflow-y: scroll;
            background-color: #fff;
            margin-top: -7.5rem;

            .itemComment {
                padding: .25rem 0;

                .iconAvatar {
                    width: .9rem;
                    height: .9rem;
                    border-radius: 50%;
                    margin-left: .42rem;
                }

                .comment {
                    line-height: .55rem;
                    color: #4e4e4e;
                    font-size: .34rem;
                    padding: 0 .39rem .3rem .39rem;
                }

                .userName {
                    color: #4e4e4e;
                    font-size: .39rem;
                }

                .commentPic {
                    width: 1.52rem;
                    height: 1.52rem;
                }

                .itemPicture {
                    margin-right: .2rem;
                }

                .itemPicture:last-child {
                    margin-right: 0;
                }
            }
            .itemComment{
                padding-top: .5rem;
            }
        }
    }
</style>
